<template>

    <div class="container">
        <headMenu />
            <!--- 路由 -->
        <a-card class="general-card" :title="'查询' + $t(menusName)">
            <div style="width: 40%; padding: 2px;">
                <a-row style="margin-bottom: 16px">
                    <a-col :span="8">
                        <a-space>
                            <a-button type="primary" @click="addModel(undefined)">
                                <template #icon>
                                    <icon-plus />
                                </template>
                                添加
                            </a-button>
                        </a-space>
                    </a-col>

                    <a-col :span="10" style="text-align: right">
                        <a-button @click="deleteNode">
                            <template #icon>
                                <icon-delete />
                            </template>
                            批量删除
                        </a-button>
                    </a-col>


                    <a-col :span="6" style="text-align: right">
                        <a-space>
                            <a-button type="text" @click="pushPage()">
                                <template #icon>
                                    <icon-refresh />
                                </template>
                            </a-button>
                        </a-space>
                    </a-col>
                </a-row>
                <a-space>自动更新路由
                    <a-switch type="line" v-model="autoRouterUpdate" @change="changeAutoRouterUpdate">
                        <template #checked-icon>
                            <icon-check />
                        </template>
                        <template #unchecked-icon>
                            <icon-close />
                        </template>
                    </a-switch>
                </a-space>
            
                <a-tree :blockNode="true" :checkable="true" :data="treeData" v-model:checked-keys="checkedIds"
                    :fieldNames="{
                        key: 'id',
                        title: 'nickName',
                        children: 'children',
                        icon: 'customIcon'
                    }">
                    <template #extra="nodeData">
                        <IconPlus 
                            @click="addModel(nodeData.id)" />
                        <icon-pen-fill
                           
                            @click="updateModel(nodeData.id)"  class="editClass" />
                    </template>
                </a-tree>
            </div>
        </a-card>


        <a-modal :visible="ediVisible" @ok="handleSubmit" @cancel="handleCancel" width="500">
            <template #title>{{ treeT.urId ? '编辑' : '添加' }}</template>
            <div>
                <a-form :model="treeT" :style="{ width: '100%' }">

                    <a-form-item field="path" label="路由地址">
                        <a-input v-model="treeT.path" placeholder=" 路由地址..." />
                    </a-form-item>

                    <a-form-item field="menuName" label="菜单名">
                        <a-input v-model="treeT.menuName" placeholder=" 菜单名..." />
                    </a-form-item>

                    <a-form-item field="nickName" label="菜单中文名">
                        <a-input v-model="treeT.nickName" placeholder=" 菜单名..." />
                    </a-form-item>

                    <a-form-item field="icon" label="图标">
                        <a-select v-model="treeT.icon" :style="{ width: '320px' }" placeholder="Please select ...">
                            <a-option value='icon-chinese-fill'>
                                <a-tag>
                                    <template #icon>
                                        <icon-chinese-fill />
                                    </template>
                                    icon-chinese-fill
                                </a-tag>
                            </a-option>
                            <a-option value='icon-english-fill'>
                                <a-tag>
                                    <template #icon>
                                        <icon-english-fill />
                                    </template>
                                    icon-english-fill
                                </a-tag>
                            </a-option>
                            <a-option value='icon-face-frown-fill'>
                                <a-tag>
                                    <template #icon>
                                        <icon-face-frown-fill />
                                    </template>
                                    icon-face-frown-fill
                                </a-tag>
                            </a-option>
                            <a-option value='icon-face-meh-fill'>
                                <a-tag>
                                    <template #icon>
                                        <icon-face-meh-fill />
                                    </template>
                                    icon-face-meh-fill
                                </a-tag>
                            </a-option>
                            <a-option value='icon-face-smile-fill'>
                                <a-tag>
                                    <template #icon>
                                        <icon-face-smile-fill />
                                    </template>
                                    icon-face-smile-fill
                                </a-tag>
                            </a-option>
                            <a-option value='icon-moon-fill'>
                                <a-tag>
                                    <template #icon>
                                        <icon-moon-fill />
                                    </template>
                                    icon-moon-fill
                                </a-tag>
                            </a-option>
                            <a-option value='icon-pen-fill'>
                                <a-tag>
                                    <template #icon>
                                        <icon-pen-fill />
                                    </template>
                                    icon-pen-fill
                                </a-tag>
                            </a-option>
                            <a-option value='icon-sun-fill'>
                                <a-tag>
                                    <template #icon>
                                        <icon-sun-fill />
                                    </template>
                                    icon-sun-fill
                                </a-tag>
                            </a-option>
                            <a-option value='icon-apps'>
                                <a-tag>
                                    <template #icon>
                                        <icon-apps />
                                    </template>
                                    icon-apps
                                </a-tag>
                            </a-option>
                            <a-option value='icon-archive'>
                                <a-tag>
                                    <template #icon>
                                        <icon-archive />
                                    </template>
                                    icon-archive
                                </a-tag>
                            </a-option>
                            <a-option value='icon-bar-chart'>
                                <a-tag>
                                    <template #icon>
                                        <icon-bar-chart />
                                    </template>
                                    icon-bar-chart
                                </a-tag>
                            </a-option>
                            <a-option value='icon-book'>
                                <a-tag>
                                    <template #icon>
                                        <icon-book />
                                    </template>
                                    icon-book
                                </a-tag>
                            </a-option>
                            <a-option value='icon-bookmark'>
                                <a-tag>
                                    <template #icon>
                                        <icon-bookmark />
                                    </template>
                                    icon-bookmark
                                </a-tag>
                            </a-option>
                            <a-option value='icon-branch'>
                                <a-tag>
                                    <template #icon>
                                        <icon-branch />
                                    </template>
                                    icon-branch
                                </a-tag>
                            </a-option>
                            <a-option value='icon-bug'>
                                <a-tag>
                                    <template #icon>
                                        <icon-bug />
                                    </template>
                                    icon-bug
                                </a-tag>
                            </a-option>
                            <a-option value='icon-bulb'>
                                <a-tag>
                                    <template #icon>
                                        <icon-bulb />
                                    </template>
                                    icon-bulb
                                </a-tag>
                            </a-option>
                            <a-option value='icon-calendar-clock'>
                                <a-tag>
                                    <template #icon>
                                        <icon-calendar-clock />
                                    </template>
                                    icon-calendar-clock
                                </a-tag>
                            </a-option>
                            <a-option value='icon-calendar'>
                                <a-tag>
                                    <template #icon>
                                        <icon-calendar />
                                    </template>
                                    icon-calendar
                                </a-tag>
                            </a-option>
                            <a-option value='icon-camera'>
                                <a-tag>
                                    <template #icon>
                                        <icon-camera />
                                    </template>
                                    icon-camera
                                </a-tag>
                            </a-option>
                            <a-option value='icon-cloud'>
                                <a-tag>
                                    <template #icon>
                                        <icon-cloud />
                                    </template>
                                    icon-cloud
                                </a-tag>
                            </a-option>
                            <a-option value='icon-command'>
                                <a-tag>
                                    <template #icon>
                                        <icon-command />
                                    </template>
                                    icon-command
                                </a-tag>
                            </a-option>
                            <a-option value='icon-common'>
                                <a-tag>
                                    <template #icon>
                                        <icon-common />
                                    </template>
                                    icon-common
                                </a-tag>
                            </a-option>
                            <a-option value='icon-compass'>
                                <a-tag>
                                    <template #icon>
                                        <icon-compass />
                                    </template>
                                    icon-compass
                                </a-tag>
                            </a-option>
                            <a-option value='icon-computer'>
                                <a-tag>
                                    <template #icon>
                                        <icon-computer />
                                    </template>
                                    icon-computer
                                </a-tag>
                            </a-option>
                            <a-option value='icon-copyright'>
                                <a-tag>
                                    <template #icon>
                                        <icon-copyright />
                                    </template>
                                    icon-copyright
                                </a-tag>
                            </a-option>
                            <a-option value='icon-dashboard'>
                                <a-tag>
                                    <template #icon>
                                        <icon-dashboard />
                                    </template>
                                    icon-dashboard
                                </a-tag>
                            </a-option>
                            <a-option value='icon-desktop'>
                                <a-tag>
                                    <template #icon>
                                        <icon-desktop />
                                    </template>
                                    icon-desktop
                                </a-tag>
                            </a-option>
                            <a-option value='icon-dice'>
                                <a-tag>
                                    <template #icon>
                                        <icon-dice />
                                    </template>
                                    icon-dice
                                </a-tag>
                            </a-option>
                            <a-option value='icon-drag-dot-vertical'>
                                <a-tag>
                                    <template #icon>
                                        <icon-drag-dot-vertical />
                                    </template>
                                    icon-drag-dot-vertical
                                </a-tag>
                            </a-option>
                            <a-option value='icon-drag-dot'>
                                <a-tag>
                                    <template #icon>
                                        <icon-drag-dot />
                                    </template>
                                    icon-drag-dot
                                </a-tag>
                            </a-option>
                            <a-option value='icon-drive-file'>
                                <a-tag>
                                    <template #icon>
                                        <icon-drive-file />
                                    </template>
                                    icon-drive-file
                                </a-tag>
                            </a-option>
                            <a-option value='icon-ear'>
                                <a-tag>
                                    <template #icon>
                                        <icon-ear />
                                    </template>
                                    icon-ear
                                </a-tag>
                            </a-option>
                            <a-option value='icon-email'>
                                <a-tag>
                                    <template #icon>
                                        <icon-email />
                                    </template>
                                    icon-email
                                </a-tag>
                            </a-option>
                            <a-option value='icon-empty'>
                                <a-tag>
                                    <template #icon>
                                        <icon-empty />
                                    </template>
                                    icon-empty
                                </a-tag>
                            </a-option>
                            <a-option value='icon-experiment'>
                                <a-tag>
                                    <template #icon>
                                        <icon-experiment />
                                    </template>
                                    icon-experiment
                                </a-tag>
                            </a-option>
                            <a-option value='icon-file-audio'>
                                <a-tag>
                                    <template #icon>
                                        <icon-file-audio />
                                    </template>
                                    icon-file-audio
                                </a-tag>
                            </a-option>
                            <a-option value='icon-file-image'>
                                <a-tag>
                                    <template #icon>
                                        <icon-file-image />
                                    </template>
                                    icon-file-image
                                </a-tag>
                            </a-option>
                            <a-option value='icon-file-pdf'>
                                <a-tag>
                                    <template #icon>
                                        <icon-file-pdf />
                                    </template>
                                    icon-file-pdf
                                </a-tag>
                            </a-option>
                            <a-option value='icon-file-video'>
                                <a-tag>
                                    <template #icon>
                                        <icon-file-video />
                                    </template>
                                    icon-file-video
                                </a-tag>
                            </a-option>
                            <a-option value='icon-file'>
                                <a-tag>
                                    <template #icon>
                                        <icon-file />
                                    </template>
                                    icon-file
                                </a-tag>
                            </a-option>
                            <a-option value='icon-fire'>
                                <a-tag>
                                    <template #icon>
                                        <icon-fire />
                                    </template>
                                    icon-fire
                                </a-tag>
                            </a-option>
                            <a-option value='icon-folder-add'>
                                <a-tag>
                                    <template #icon>
                                        <icon-folder-add />
                                    </template>
                                    icon-folder-add
                                </a-tag>
                            </a-option>
                            <a-option value='icon-folder-delete'>
                                <a-tag>
                                    <template #icon>
                                        <icon-folder-delete />
                                    </template>
                                    icon-folder-delete
                                </a-tag>
                            </a-option>
                            <a-option value='icon-folder'>
                                <a-tag>
                                    <template #icon>
                                        <icon-folder />
                                    </template>
                                    icon-folder
                                </a-tag>
                            </a-option>
                            <a-option value='icon-gift'>
                                <a-tag>
                                    <template #icon>
                                        <icon-gift />
                                    </template>
                                    icon-gift
                                </a-tag>
                            </a-option>
                            <a-option value='icon-idcard'>
                                <a-tag>
                                    <template #icon>
                                        <icon-idcard />
                                    </template>
                                    icon-idcard
                                </a-tag>
                            </a-option>
                            <a-option value='icon-image-close'>
                                <a-tag>
                                    <template #icon>
                                        <icon-image-close />
                                    </template>
                                    icon-image-close
                                </a-tag>
                            </a-option>
                            <a-option value='icon-image'>
                                <a-tag>
                                    <template #icon>
                                        <icon-image />
                                    </template>
                                    icon-image
                                </a-tag>
                            </a-option>
                            <a-option value='icon-interaction'>
                                <a-tag>
                                    <template #icon>
                                        <icon-interaction />
                                    </template>
                                    icon-interaction
                                </a-tag>
                            </a-option>
                            <a-option value='icon-language'>
                                <a-tag>
                                    <template #icon>
                                        <icon-language />
                                    </template>
                                    icon-language
                                </a-tag>
                            </a-option>
                            <a-option value='icon-layers'>
                                <a-tag>
                                    <template #icon>
                                        <icon-layers />
                                    </template>
                                    icon-layers
                                </a-tag>
                            </a-option>
                            <a-option value='icon-layout'>
                                <a-tag>
                                    <template #icon>
                                        <icon-layout />
                                    </template>
                                    icon-layout
                                </a-tag>
                            </a-option>
                            <a-option value='icon-loading'>
                                <a-tag>
                                    <template #icon>
                                        <icon-loading />
                                    </template>
                                    icon-loading
                                </a-tag>
                            </a-option>
                            <a-option value='icon-location'>
                                <a-tag>
                                    <template #icon>
                                        <icon-location />
                                    </template>
                                    icon-location
                                </a-tag>
                            </a-option>
                            <a-option value='icon-lock'>
                                <a-tag>
                                    <template #icon>
                                        <icon-lock />
                                    </template>
                                    icon-lock
                                </a-tag>
                            </a-option>
                            <a-option value='icon-loop'>
                                <a-tag>
                                    <template #icon>
                                        <icon-loop />
                                    </template>
                                    icon-loop
                                </a-tag>
                            </a-option>
                            <a-option value='icon-man'>
                                <a-tag>
                                    <template #icon>
                                        <icon-man />
                                    </template>
                                    icon-man
                                </a-tag>
                            </a-option>
                            <a-option value='icon-menu'>
                                <a-tag>
                                    <template #icon>
                                        <icon-menu />
                                    </template>
                                    icon-menu
                                </a-tag>
                            </a-option>
                            <a-option value='icon-mind-mapping'>
                                <a-tag>
                                    <template #icon>
                                        <icon-mind-mapping />
                                    </template>
                                    icon-mind-mapping
                                </a-tag>
                            </a-option>
                            <a-option value='icon-mobile'>
                                <a-tag>
                                    <template #icon>
                                        <icon-mobile />
                                    </template>
                                    icon-mobile
                                </a-tag>
                            </a-option>
                            <a-option value='icon-moon'>
                                <a-tag>
                                    <template #icon>
                                        <icon-moon />
                                    </template>
                                    icon-moon
                                </a-tag>
                            </a-option>
                            <a-option value='icon-mosaic'>
                                <a-tag>
                                    <template #icon>
                                        <icon-mosaic />
                                    </template>
                                    icon-mosaic
                                </a-tag>
                            </a-option>
                            <a-option value='icon-nav'>
                                <a-tag>
                                    <template #icon>
                                        <icon-nav />
                                    </template>
                                    icon-nav
                                </a-tag>
                            </a-option>
                            <a-option value='icon-notification-close'>
                                <a-tag>
                                    <template #icon>
                                        <icon-notification-close />
                                    </template>
                                    icon-notification-close
                                </a-tag>
                            </a-option>
                            <a-option value='icon-notification'>
                                <a-tag>
                                    <template #icon>
                                        <icon-notification />
                                    </template>
                                    icon-notification
                                </a-tag>
                            </a-option>
                            <a-option value='icon-palette'>
                                <a-tag>
                                    <template #icon>
                                        <icon-palette />
                                    </template>
                                    icon-palette
                                </a-tag>
                            </a-option>
                            <a-option value='icon-pen'>
                                <a-tag>
                                    <template #icon>
                                        <icon-pen />
                                    </template>
                                    icon-pen
                                </a-tag>
                            </a-option>
                            <a-option value='icon-phone'>
                                <a-tag>
                                    <template #icon>
                                        <icon-phone />
                                    </template>
                                    icon-phone
                                </a-tag>
                            </a-option>
                            <a-option value='icon-printer'>
                                <a-tag>
                                    <template #icon>
                                        <icon-printer />
                                    </template>
                                    icon-printer
                                </a-tag>
                            </a-option>
                            <a-option value='icon-public'>
                                <a-tag>
                                    <template #icon>
                                        <icon-public />
                                    </template>
                                    icon-public
                                </a-tag>
                            </a-option>
                            <a-option value='icon-pushpin'>
                                <a-tag>
                                    <template #icon>
                                        <icon-pushpin />
                                    </template>
                                    icon-pushpin
                                </a-tag>
                            </a-option>
                            <a-option value='icon-qrcode'>
                                <a-tag>
                                    <template #icon>
                                        <icon-qrcode />
                                    </template>
                                    icon-qrcode
                                </a-tag>
                            </a-option>
                            <a-option value='icon-relation'>
                                <a-tag>
                                    <template #icon>
                                        <icon-relation />
                                    </template>
                                    icon-relation
                                </a-tag>
                            </a-option>
                            <a-option value='icon-robot-add'>
                                <a-tag>
                                    <template #icon>
                                        <icon-robot-add />
                                    </template>
                                    icon-robot-add
                                </a-tag>
                            </a-option>
                            <a-option value='icon-robot'>
                                <a-tag>
                                    <template #icon>
                                        <icon-robot />
                                    </template>
                                    icon-robot
                                </a-tag>
                            </a-option>
                            <a-option value='icon-safe'>
                                <a-tag>
                                    <template #icon>
                                        <icon-safe />
                                    </template>
                                    icon-safe
                                </a-tag>
                            </a-option>
                            <a-option value='icon-schedule'>
                                <a-tag>
                                    <template #icon>
                                        <icon-schedule />
                                    </template>
                                    icon-schedule
                                </a-tag>
                            </a-option>
                            <a-option value='icon-shake'>
                                <a-tag>
                                    <template #icon>
                                        <icon-shake />
                                    </template>
                                    icon-shake
                                </a-tag>
                            </a-option>
                            <a-option value='icon-skin'>
                                <a-tag>
                                    <template #icon>
                                        <icon-skin />
                                    </template>
                                    icon-skin
                                </a-tag>
                            </a-option>
                            <a-option value='icon-stamp'>
                                <a-tag>
                                    <template #icon>
                                        <icon-stamp />
                                    </template>
                                    icon-stamp
                                </a-tag>
                            </a-option>
                            <a-option value='icon-storage'>
                                <a-tag>
                                    <template #icon>
                                        <icon-storage />
                                    </template>
                                    icon-storage
                                </a-tag>
                            </a-option>
                            <a-option value='icon-subscribe-add'>
                                <a-tag>
                                    <template #icon>
                                        <icon-subscribe-add />
                                    </template>
                                    icon-subscribe-add
                                </a-tag>
                            </a-option>
                            <a-option value='icon-subscribe'>
                                <a-tag>
                                    <template #icon>
                                        <icon-subscribe />
                                    </template>
                                    icon-subscribe
                                </a-tag>
                            </a-option>
                            <a-option value='icon-subscribed'>
                                <a-tag>
                                    <template #icon>
                                        <icon-subscribed />
                                    </template>
                                    icon-subscribed
                                </a-tag>
                            </a-option>
                            <a-option value='icon-sun'>
                                <a-tag>
                                    <template #icon>
                                        <icon-sun />
                                    </template>
                                    icon-sun
                                </a-tag>
                            </a-option>
                            <a-option value='icon-tag'>
                                <a-tag>
                                    <template #icon>
                                        <icon-tag />
                                    </template>
                                    icon-tag
                                </a-tag>
                            </a-option>
                            <a-option value='icon-tags'>
                                <a-tag>
                                    <template #icon>
                                        <icon-tags />
                                    </template>
                                    icon-tags
                                </a-tag>
                            </a-option>
                            <a-option value='icon-thunderbolt'>
                                <a-tag>
                                    <template #icon>
                                        <icon-thunderbolt />
                                    </template>
                                    icon-thunderbolt
                                </a-tag>
                            </a-option>
                            <a-option value='icon-tool'>
                                <a-tag>
                                    <template #icon>
                                        <icon-tool />
                                    </template>
                                    icon-tool
                                </a-tag>
                            </a-option>
                            <a-option value='icon-trophy'>
                                <a-tag>
                                    <template #icon>
                                        <icon-trophy />
                                    </template>
                                    icon-trophy
                                </a-tag>
                            </a-option>
                            <a-option value='icon-unlock'>
                                <a-tag>
                                    <template #icon>
                                        <icon-unlock />
                                    </template>
                                    icon-unlock
                                </a-tag>
                            </a-option>
                            <a-option value='icon-user-add'>
                                <a-tag>
                                    <template #icon>
                                        <icon-user-add />
                                    </template>
                                    icon-user-add
                                </a-tag>
                            </a-option>
                            <a-option value='icon-user-group'>
                                <a-tag>
                                    <template #icon>
                                        <icon-user-group />
                                    </template>
                                    icon-user-group
                                </a-tag>
                            </a-option>
                            <a-option value='icon-user'>
                                <a-tag>
                                    <template #icon>
                                        <icon-user />
                                    </template>
                                    icon-user
                                </a-tag>
                            </a-option>
                            <a-option value='icon-video-camera'>
                                <a-tag>
                                    <template #icon>
                                        <icon-video-camera />
                                    </template>
                                    icon-video-camera
                                </a-tag>
                            </a-option>
                            <a-option value='icon-wifi'>
                                <a-tag>
                                    <template #icon>
                                        <icon-wifi />
                                    </template>
                                    icon-wifi
                                </a-tag>
                            </a-option>
                            <a-option value='icon-woman'>
                                <a-tag>
                                    <template #icon>
                                        <icon-woman />
                                    </template>
                                    icon-woman
                                </a-tag>
                            </a-option>
                        </a-select>


                    </a-form-item>




                </a-form>
            </div>
        </a-modal>
    </div>
</template>

<script>
import headMenu from '@/components/headMenu/headMenu.vue';
import { IconPlus } from '@arco-design/web-vue/es/icon';
import api from '@/api/sys/LuYou'
export default {
    components: {
        IconPlus, headMenu
    },
    data() {
        return {
            autoRouterUpdate: localStorage.getItem("autoRouterUpdate") == "1",
            ediVisible: false,
            menusName: this.$router.currentRoute.value.meta.locale,
            treeData: [],
            TreeNodeData: { key: "id", title: "menuName" },
            treeT: {},
            checkedIds: []
        };
    },
    methods: {
        /**
         * 同步我们的自动刷新路由的值
         */
        changeAutoRouterUpdate(value, e) {
            this.autoRouterUpdate = value
            const values = value ? 1 : 0
            localStorage.setItem("autoRouterUpdate", values)
        },
        /**
         * 删除节点
         */
        deleteNode() {
            api.delete(this.checkedIds).then(res => {
                if (res.data.code === 200) {
                    this.$notification.success('操作成功!');
                    this.handleCancel()
                    if (this.autoRouterUpdate) this.pushPage()
                } else {
                    this.$notification.error('操作失败!');
                }
            })
        },
        /**
         * 清楚路由刷新页面
         */
        pushPage() {
            localStorage.removeItem("router")
            this.$router.go(0)
        },
        /**
         *  提交
         */
        handleSubmit() {
            api.updateAdd(this.treeT).then(res => {
                if (res.data.code === 200) {
                    this.$notification.success('操作成功!');
                    this.handleCancel()
                    this.treeAll()
                    //判断开启了自动刷新没有
                    if (this.autoRouterUpdate) this.pushPage()
                } else {
                    this.$notification.error('操作失败!');
                }
            })
        },

        /**
         * 添加
         */
        addModel(id) {
            this.ediVisible = true
            this.treeT = {}
            if (id) this.treeT.parentId = id
        },
        /**
         * 修改数据的话我们需要回显
         */
        updateModel(id) {
            this.ediVisible = true
            api.info(id).then(res => {
                this.treeT = res.data.data.routing
            })
        },
        handleCancel() {
            this.ediVisible = false
            this.tree = {}
        },

        /**
         *  获取数据
         */
        treeAll() {
            api.treeAll().then(res => {
                this.treeData = res.data.data.data
            })
        },
    },
    created() {
        this.treeAll()
    }
};
</script>

<style>
.editClass{
    margin-left: 20px;;
}
</style>